<template>
  <basic-container>
    <h3>Project</h3>
    <avue-crud :option="option" :data="data" @refresh-change="refreshChange" @on-load="onLoad" :page="searchForm" :table-loading="tableLoading">
      <template slot="menu" slot-scope="{ row, size, type }">
        <el-button @click="open(row)" :size="size" :type="type">禁用</el-button>
        <el-button @click="start(row)" :size="size" :type="type">修改</el-button>
        <el-button @click="delet(row)" :size="size" :type="type">删除</el-button>
        <!--el-button type="primary" :loading="true">编译中</el-button-->
      </template>

      <template slot="xxx2" slot-scope="{ row }">
        <el-slider :value="row.xxx2" :disabled="false" :step="10"></el-slider>
      </template>

      <template slot="build" slot-scope="{ row, size, type }">
        <el-button @click="buildopen(row)" :size="size" type="scuessful" plain>Build</el-button>
      </template>

      <template slot="deploy" slot-scope="{ row, size, type }">
        <el-button @click="deployopen(row)" :size="size" type="scuessful">Deploy</el-button>
      </template>
    </avue-crud>
    <el-dialog title="Build" :visible.sync="buildVisible" width="650px" :before-close="handleClose">
      <build-page ref="buildPage" @onSubmit="buildSubmit" @handleClose="handleClose"></build-page>
    </el-dialog>

    <el-dialog title="Deploy" :visible.sync="deployVisible" width="650px" :before-close="deployClose">
      <deploy-page ref="deployPage" @onSubmit="deploySubmit" @deployClose="deployClose"> </deploy-page>
    </el-dialog>
  </basic-container>
</template>

<script>
import { option } from "./application-option.js";
import { deployoption } from "./deploy-option.js";
import { getProjectList } from "@/api/application.js";
import buildPage from "./build-page.vue";
import deployPage from "./deploy-page.vue";

export default {
  data() {
    return {
      value1: 20,
      option,
      deployoption,
      data: [],
      config: [],
      tableLoading: true,
      searchForm: {
        total: 0,
        indexPage: 1,
        pageSize: 20
      },
      buildVisible: false,
      deployVisible: false,
      obj: {}
    };
  },
  components: {
    buildPage,
    deployPage
  },
  methods: {
    onLoad(page) {
      this.searchForm.indexPage = page.currentPage;
      this.searchForm.currentPage = page.currentPage;
      this.searchForm.pageSize = page.pageSize;
      this.templateList();
    },

    async templateList() {
      try {
        this.tableLoading = true;
        const res = await getProjectList();
        this.data = res.data;
        this.tableLoading = false;
      } catch (error) {
        console.log(error);
      }
    },
    refreshChange() {
      this.templateList();
    },



    // Deploy 弹窗
    deployopen(row) {
      // this.obj = row;
      this.deployVisible = true;
      this.$nextTick(() => {
        this.$refs.deployPage.show(row);
      });
      // console.log(row);
      // this.obj = {
      //   InstanceId: row.InstanceId,
      //   Status: row.Status,
      // };
    },
    deploySubmit() {
      // console.log(form);
    },
    deployClose() {
      // console.log(213);
      this.deployVisible = false;
      this.buildVisible = false;
    },




    // ===== Build弹窗
    buildopen(row) {
      this.buildVisible = true;
      this.$nextTick(() => {
        this.$refs.buildPage.show(row);
      });
    },
    buildSubmit(form) {
      console.log(form);
    },
    handleClose() {
      // console.log(213);
      this.deployVisible = false;
      this.buildVisible = false;
    },



    emptytChange() {
      this.$message.success("已清空");
    },
    handleSubmit(from, done) {
      this.update(this.obj);
      console.log(from);
      setTimeout(() => {
        done();
      }, 500);
      this.handleClose();
      // this.$message.success("当前数据nnn" + JSON.stringify(this.obj));
    }
  }
};
</script>

<style scoped></style>
